<template>
  <div class="app-container">
    <el-card>
      <div style="padding: 20px 0">智能推荐</div>
      <div>
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane
            v-for="item in releaseList"
            :key="item.id"
            :label="item.jobname"
            :name="item.id.toString()"
          >
            <el-table :data="companyRecommendLists" style="width: 100%">
              <el-table-column prop="prop" label="基本信息" width="width">
                <template slot-scope="scope">
                  <div style="display: flex">
                    <div style="margin-right: 10px; border-radius: 50%">
                      <img
                        :src="scope.row.photoImgSrc"
                        alt=""
                        style="border-radius: 50%; width: 52px; height: 52px"
                      />
                    </div>
                    <div class="textbox">
                      <div class="title">
                        {{ scope.row.fullName }}
                      </div>
                      <div>
                        {{ scope.row.ageText }} · {{ scope.row.sexText }} ·
                        {{ scope.row.educationText }} ·
                        {{ scope.row.experienceText }}经验
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="prop" label="期望薪资" width="150">
                <template slot-scope="scope">
                  <div style="font-size: 14px; color: #ff704f">
                    {{ scope.row.expectWageText }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="prop" label="求职状态" width="width">
                <template slot-scope="scope">
                  {{ scope.row.currentText }}
                </template>
              </el-table-column>
              <el-table-column prop="prop" label="求职意向" width="width">
                <template slot-scope="scope">
                  <div>想找 {{ scope.row.expectCategoryText }} 工作</div>
                  <div>想在 {{ scope.row.expectDistrictText }} 工作</div>
                </template>
              </el-table-column>
              <el-table-column prop="prop" label="刷新时间" width="width">
                <template slot-scope="scope">
                  {{ scope.row.refreshtime | dateFormat }}
                </template>
              </el-table-column>
            </el-table>

            <!-- 添加分页组件 -->
            <div class="pagination-container">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="companyRecommendQuery.page"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="companyRecommendQuery.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import { companyRecommendListApi } from "@/api/intelligence";
import { positionListApi } from "@/api/position";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      activeName: "",
      companyRecommendQuery: {
        page: 1,
        pagesize: 10,
        jobId: null,
        uid: "",
      },
      // 职位列表请求参数
      positionQuery: {
        audit: 1,
        page1: 1,
        pageSize: 10,
        uid: "",
      },
      releaseList: [],
      companyRecommendLists: [],
      recommendName: "",
      total: 0, // 添加总数属性
    };
  },
  async created() {
    this.positionQuery.uid = this.userId;
    this.companyRecommendQuery.uid = this.userId;
    await this.positionList();
    // 从路由参数中获取职位ID
    const { jobId } = this.$route.query;
    if (jobId) {
      this.activeName = jobId.toString();
      this.companyRecommendQuery.jobId = parseInt(jobId);
      await this.companyRecommendList();
    }
  },
  computed: {
    ...mapGetters(["userId"]),
  },
  methods: {
    // 企业职位列表查询
    async positionList() {
      const res = await positionListApi(this.positionQuery);
      this.releaseList = res.records;
      // 如果没有指定jobId，默认选中第一个职位
      if (!this.$route.query.jobId && res.records.length > 0) {
        this.activeName = res.records[0].id.toString();
        this.companyRecommendQuery.jobId = res.records[0].id;
        await this.companyRecommendList();
      }
    },
    // 处理标签页点击
    async handleTabClick(tab) {
      this.companyRecommendQuery.jobId = parseInt(tab.name);
      // 重置分页到第一页
      this.companyRecommendQuery.page = 1;
      await this.companyRecommendList();
    },
    // 智能推荐
    async companyRecommendList() {
      const res = await companyRecommendListApi(this.companyRecommendQuery);
      this.companyRecommendLists = res.records;
      this.total = res.total || 0; // 更新总数
    },
    // 处理每页条数变化
    handleSizeChange(val) {
      this.companyRecommendQuery.pagesize = val;
      this.companyRecommendList();
    },
    // 处理页码变化
    handleCurrentChange(val) {
      this.companyRecommendQuery.page = val;
      this.companyRecommendList();
    },
  },
};
</script>

<style scoped>
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>
